<template>
  <div class="">
    <el-table :data="items" border>
      <el-table-column prop="_id" label="ID" width="320" align="center"></el-table-column>
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button 
            type="text" 
            size="medium"
            @click="$router.push(`/admin_user/edit/${row._id}`)"
          >编辑</el-button>
          <el-button 
            type="text" 
            size="medium"
            @click="remove(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getAdminUserList, deleteAdminUserList} from '@/api/adminUser'
export default {
  name: "AdminUserList",
  data() {
    return {
      items: []
    };
  },
  created() {
    this.getAdminUserList()
  },
  methods: {
    async getAdminUserList() {
      let res = await getAdminUserList()
      this.items = res.data.data
    },
    async remove(row) {
      this.$confirm(`确定删除 ${row.username} 账号?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteAdminUserList(row._id)
        res.data.code === 200 && this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getAdminUserList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });     
    }
  }
};
</script>

<style lang="less" scoped></style>
